<script setup>
import { useShoppingCarStore } from '@/stores/shoppingCar';
import { ElMessage } from 'element-plus'
import { buyProducts } from '../api/product'
import { computed } from 'vue';

const shoppingCarStore = useShoppingCarStore();
const tableData = computed(() => shoppingCarStore.shoppingCar)

function settle() {
    buyProducts().then(res => {
        if (res) {
            shoppingCarStore.clear();
            ElMessage.success('购买成功');
        } else {
            ElMessage.error('购买失败');
        }
    });

}
</script> 
<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" sortable />
        <el-table-column prop="title" label="商品名称" />
        <el-table-column prop="price" label="商品价格" />
        <el-table-column prop="number" label="数量" />
    </el-table>
    <div v-if="tableData.length">
        <h2>商品总价为：{{ shoppingCarStore.totalPrice }}</h2>
        <el-button type="primary" @click="settle">结算商品</el-button>
    </div>
</template>
<style scoped lang="scss">
.el-table {
    :deep(.el-table__cell) {
        text-align: center;
    }
}
</style>